import React, { useEffect, useState } from "react";
import * as styles from "./issuesItem.module.scss";
import { useDispatch, useSelector } from "react-redux";
import { getTypeList } from "../../redux/typeSlice";
import { Tag } from "antd";
import { formatDate } from "@/utils/tools";
import { getUserByIdApi } from "@/api/user";
import { useNavigate } from "react-router-dom";
export default function IssuesItem(props) {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const typeList = useSelector((state) => state.type.typeList);
  const colorArr = ["#108ee9", "#2db7f5", "#f50", "green", "#87d068", "blue", "red", "purple"];
  const [userInfo, setUserInfo] = useState([]);

  useEffect(() => {
    if (!typeList.length) {
      dispatch(getTypeList());
    }
    // 发送请求获取用户的信息
    async function fetchUserData() {
      const { data } = await getUserByIdApi(props.issueInfo.userId);
      setUserInfo(data);
    }
    fetchUserData();
  }, []);

  const type = typeList.find((item) => item._id === props.issueInfo.typeId);

  return (
    <>
      <div className={styles.container}>
        <div className={styles.issueNum}>
          <div>{props.issueInfo.commentNumber}</div>
          <div>回答</div>
        </div>

        <div className={styles.issueNum}>
          <div>{props.issueInfo.scanNumber}</div>
          <div>浏览</div>
        </div>

        {/* 问题内容 */}
        <div className={styles.issueContainer}>
          <div className={styles.top} onClick={() => navigate(`/issue/id=${props.issueInfo._id}`)}>
            {props.issueInfo.issueTitle}
          </div>
          <div className={styles.bottom}>
            <div className={styles.left}>
              <Tag color={colorArr[typeList.indexOf(type) % colorArr.length]}>{type?.typeName}</Tag>
            </div>
            <div className={styles.right}>
              <Tag color="volcano">{userInfo.nickname}</Tag>
              <span>{formatDate(props.issueInfo.issueDate, "year")}</span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
